// component/dataBoard/rootDataBoard/rootDataBoard.js
import * as echarts from '../../../ec-canvas/echarts.min'
const appg = getApp().globalData
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    isLoaded: false,
    isDisposed: false,
    uid: null,
    userType: null,
    dataList: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 数据回来后
    async getData() {
      this.triggerEvent('Skeleton', {
        loading: true
      })
      const params = {
        userType: this.data.userType,
        school_ID:appg.userInfo.school_ID
      }
      const json = await getApp().$axios("/getDataKanBan", "POST", params)
      this.triggerEvent('Skeleton', {
        loading: false
      })
      if (json.status !== 200) {
        wx.showToast({
          title: '查询有误，请重试',
          icon: 'none'
        })
        return
      }
      console.log(json.data);
      this.setData({
        dataList: json.data
      })
      this.init()
    },
    init() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['学生', '老师', '管理员', '总人数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: this.data.dataList.xAxis
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '学生',
              type: 'line',
              stack: 'Total',
              areaStyle: {
                normal: {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0.8,
                      color: "#1D3972", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgba(57, 134, 255, 0)", // 100% 处的颜色
                    },
                  ]),
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.data.dataList.echartsStu
            },
            {
              name: '老师',
              type: 'line',
              stack: 'Total',
              areaStyle: {
                normal: {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0.8,
                      color: "#B2DB9F", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgba(57, 134, 255, 0)", // 100% 处的颜色
                    },
                  ]),
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.data.dataList.echartsTea
            },
            {
              name: '管理员',
              type: 'line',
              stack: 'Total',
              areaStyle: {
                normal: {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0.8,
                      color: "#FCD98A", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgba(57, 134, 255, 0)", // 100% 处的颜色
                    },
                  ]),
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.data.dataList.echartsRoot
            },
            {
              name: '总人数',
              type: 'line',
              stack: 'Total',
              areaStyle: {
                normal: {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0.8,
                      color: "#F39494", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgba(57, 134, 255, 0)", // 100% 处的颜色
                    },
                  ]),
                },
              },
              label: {
                show: true,
                position: 'top'
              },
              emphasis: {
                focus: 'series'
              },
              data: this.data.dataList.echartsTotal
            },
          ]
        }
        chart.setOption(option);
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;

        this.setData({
          isLoaded: true,
          isDisposed: false
        });

        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    dispose: function () {
      if (this.chart) {
        this.chart.dispose();
      }
      this.setData({
        isDisposed: true
      });
    },
  },
  lifetimes: {
    attached: function () {
      this.setData({
        uid: appg.userInfo.id,
        userType: appg.userInfo.identity_ID,
      })
      // 获取组件
      this.ecComponent = this.selectComponent('#mychart-bar');
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
      this.dispose(0)
    },
  },
  // 组件在页面中的生命周期
  pageLifetimes: {
    show: function () {
      // this.init()
      this.getData()
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  }
})